<template>
  <div class="huzhao-dialog">
  
    <el-dialog title="外事证件" 
      :visible.sync="dialogVisible" 
      @open='sendAjax'
      @close="$emit('update:dialogShowIf', false)"
       top='5vh'
       >
  
      <section class='huzhao-dialog-body'>
        <ul>
          <li v-for='i in 1'>
            <div class='titles'>
              <div class = 'titles-left'>有效</div>
              <div class = 'titles-middle'>
                <h2 class='titles-middle-type'>公务普通护照 <span>在库</span></h2>
                <div class='titles-middle-time'>
                  <span>签发日期&nbsp;&nbsp;&nbsp;2017.08.09</span>
                  <span>有效日期&nbsp;&nbsp;&nbsp;2017.08.09</span>
                  <span>证件号&nbsp;&nbsp;444054894173x</span>
                </div>
              </div>
              <div class = 'titles-right' @click.stop = 'handleExpand(i)'>
                查看签证 <i class='el-icon-caret-bottom' :class='{rotate:detailVisible}'></i>
              </div>
            </div>
            <el-collapse-transition>

              <ul class='content' v-show='detailVisible'>
                <li v-for='i in 3'>
                  <div class='country'>加拿大</div>
                  <div class='time'>
                    <span>签发日期 </span>&nbsp;<span> 2017.08.09</span>
                    <span>失效日期 </span>&nbsp;<span> 2017.08.09</span>
                  </div>
                  <div class='number'>
                    签注号: 444054894173x
                  </div>
                </li>
              </ul>

            </el-collapse-transition>
          </li>
        </ul>
  
      </section>
       
    </el-dialog>
  
  </div>
</template>

<script>
import Vue from "vue";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

import {

  Dialog

} from "element-ui";

Vue.use(Dialog)
Vue.component(CollapseTransition.name, CollapseTransition)

export default {

  data () {

    return {
      dialogVisible: false,
      detailVisible:false,
      list: [{
        status: '有效', //状态 (新发,有效,无效)
        type: '公务普通护照', //护照类型
        typeStatus: '', //护照状态  (在库,借出)
        startDate: '',  //签发日期
        endDate: '',  //有效日期
        IDnumber: '',  //证件号
        detail: [   // 展开详情的数据
          {
            country: '',  //国家
            startDate: '',  //签发日期
            endDate: '',  //失效日期
            isDataPass: '',  //是否即将过期  布尔值
            number: ''  //签注号
          }
        ]
      },
      {
        status: '新发', //状态 (新发,有效,无效)
        type: '外交护照', //护照类型
        typeStatus: '', //护照状态  (在库,借出)
        startDate: '',  //签发日期
        endDate: '',  //有效日期
        IDnumber: '',  //证件号
        detail: [   // 展开详情的数据
          {
            country: '',  //国家
            startDate: '',  //签发日期
            endDate: '',  //失效日期
            isDataPass: '',  //是否即将过期  布尔值
            number: ''  //签注号
          }
        ]
      }]
    }

  },
  watch: {
    dialogShowIf (newValue, oldValue) {
      this.dialogVisible = newValue
    }
  },

  props: {

    dialogShowIf: {

      type: Boolean,

      default: false

    }

  },

  methods: {
    sendAjax(){
      this.Axios
        .Post(this.URL.getZsjPassportAndVisaInfo.url)
        .then((res)=>{
          console.log(res,'护照')
        })
    },
    handleExpand(i) {
      console.log(i,'i')
      this.detailVisible = !this.detailVisible;
    }

  }





}
</script>

<style lang='less'>
.huzhao-dialog {
  .el-dialog--small {
    width: 63%;
  }
  ::-webkit-scrollbar {
    width: 0px;
  }
  .huzhao-dialog-body {
    max-height: 460px;
    overflow: auto;
    & > ul {
      & > li {
        margin-bottom: 16px;
        .titles {
          border-radius: 4px;
          background-color: #5eb3f9;
          color: #fff;
          height: 80px;
          overflow: hidden;
          & > div {
            float: left;
          }
          .titles-left {
            border-radius: 50%;
            position: relative;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            height: 46px;
            width: 46px;
            line-height: 48px;
            font-size: 12px;
            text-align: center;
            text-indent: -1px;
            background-color: rgba(0, 0, 0, 0.16);
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
          }
          .titles-middle {
            padding-left: 24px;
            .titles-middle-type {
              padding: 12px 0 8px 10px;
              font-size: 16px;
              span {
                margin-left: 10px;
                font-size: 13px;
                display: inline-block;
                padding: 2px 10px;
                background-color: rgba(0, 0, 0, 0.16);
                border-radius: 12px;
                font-weight: normal;
              }
            }

            .titles-middle-time {
              span {
                float: left;
                margin-right: 24px;
                margin-left: 10px;
              }
            }
          }

          .titles-right {
            cursor: pointer;
            float: left;
            position: relative;
            top: 50%;
            left: 5%;
            transform: translateY(-50%);
            
            i {
              transition: transform .4s;
              margin-left: 3px;
            }
            i.rotate {
              transform: rotate(180deg);
            }
          }
        }

        .content {
          overflow: hidden;
          background-color: #f1f1f1;
          padding: 12px;
          border-radius: 0 0 12px 12px;
          & > li:nth-of-type(n+2) {
           
          }
          & > li {
            width: 100%;
            height: 48px;
            line-height: 50px;
            border-radius: 15px;
            margin:12px 0;
            background-color: #fff;
            & > div {
              float: left;
            }
            .country {
              width: 90px;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              margin-right: 40px;
              text-align: right;
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis;
            }

            .time {
              span {
                color: #666;
              }
              span:nth-of-type(2n) {
                margin-right: 30px;
                font-size: 15px;
                color:#333;
                font-weight: 550;
              }
              span.red {
                color:#D14D4D;
              }
            }
            .number {
              float: right;
              margin-right: 34px;
            }
          }
        }
      }
    }
  }
}
</style>